import React, { useState } from 'react';
import { Head } from 'ice';
import { Balloon, Button, Card, Dialog, Field, Icon, ResponsiveGrid, Table, Tag } from '@alifd/next';
import PageHeader from '@/components/PageHeader';
import { useFusionTable, useFullscreen } from 'ahooks';
import store from '@/store';
import MainForm from './components/MainForm';
import styles from './index.module.scss';

const TableActionIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1899388_oxn3zhg34oj.js',
});

const Menu = () => {
  // 显示弹窗
  const [showForm, setShowForm] = useState(false);
  // 菜单 ID
  const [menuId, setMenuId] = useState(0);
  // 表单字段数据
  const mainField = Field.useField();
  // 斑马线
  const [isZebra, setIsZebra] = useState(false);
  // 表格紧凑与否
  const [size, setSize] = useState('medium');
  // 菜单状态
  const [menuState, menuDispatchers] = store.useModel('menu');
  // 表格数据
  const { tableProps, search, error, refresh } = useFusionTable(menuDispatchers.fetchList, {});
  // 切换全屏
  const [_, { toggleFull }] = useFullscreen(document.getElementById('table-container'), {
    onFull: () => {
      const ele = document.getElementById('table-container');
      ele.setAttribute('style', 'padding: 2rem;background-color:#fff;');
    },
  });
  // 类型渲染
  const typeCell = (value) => {
    let typeNode;
    switch (value) {
      case 0:
        typeNode = (
          <Tag type="normal" size="small" color="orange">
            目录
          </Tag>
        );
        break;
      case 1:
        typeNode = (
          <Tag type="normal" size="small" color="green">
            菜单
          </Tag>
        );
        break;
      case 2:
        typeNode = (
          <Tag type="normal" size="small" color="blue">
            按钮
          </Tag>
        );
        break;
      default:
        typeNode = (
          <Tag type="normal" size="small" color="red">
            未知
          </Tag>
        );
        break;
    }
    return typeNode;
  };

  // 内容太长，有溢出的；渲染
  const wrapperCell = (value) => {
    if (value === null) {
      return null;
    }
    const tooltip = <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{value}</div>;
    return (
      <Balloon.Tooltip trigger={tooltip} align="t">
        {value}
      </Balloon.Tooltip>
    );
  };

  // 操作列渲染
  const actionCell = (value) => {
    return (
      <>
        <Button
          type="primary"
          text
          style={{ marginRight: '0.5rem' }}
          onClick={() => {
            if (value > 0) {
              menuDispatchers.fetchInfo(value).then((data) => {
                mainField.setValues(data);
                setMenuId(value);
              });
              setShowForm(true);
            }
          }}
        >
          修改
        </Button>
        <Button
          type="primary"
          text
          onClick={() => {
            Dialog.confirm({
              title: '提示',
              content: `确定对 “id=${value}” 进行删除操作？`,
              onOk: () => {
                menuDispatchers.delOne(value).then(() => {
                  refresh();
                  menuDispatchers.fetchAsideNav();
                  menuDispatchers.fetchTreeList();
                });
              },
            });
          }}
        >
          删除
        </Button>
      </>
    );
  };

  return (
    <>
      <ResponsiveGrid gap={20}>
        <Head>
          <title>菜单管理</title>
        </Head>
        <ResponsiveGrid.Cell colSpan={12}>
          <PageHeader breadcrumbs={[{ name: '系统管理' }, { name: '菜单管理' }]} />
        </ResponsiveGrid.Cell>
        <ResponsiveGrid.Cell colSpan={12}>
          <Card free className={styles.container} id="table-container">
            <Card.Content>
              <div className={styles.actionBar}>
                <div className={styles.buttonGroup}>
                  <Button
                    type="primary"
                    onClick={() => {
                      setShowForm(true);
                      setMenuId(0);
                    }}
                  >
                    新增
                  </Button>
                </div>
                <div className={styles.rightButtonGroup}>
                  <Button text onClick={() => setSize(size === 'medium' ? 'small' : 'medium')}>
                    <TableActionIcon type="narrow" size="small" />
                  </Button>
                  <Button text onClick={() => setIsZebra(!isZebra)}>
                    <TableActionIcon type="zebra" size="small" />
                  </Button>
                  <Button text onClick={toggleFull}>
                    <TableActionIcon type="fullscreen" size="small" />
                  </Button>
                </div>
              </div>
              <Table {...tableProps} primaryKey="menuId" tableLayout="fixed" size={size} isZebra={isZebra} isTree>
                <Table.Column title="名称" dataIndex="name" />
                <Table.Column title="上级" dataIndex="parentName" />
                <Table.Column
                  title="图标"
                  dataIndex="icon"
                  width={100}
                  align="center"
                  cell={(value) => <Icon type={value} />}
                />
                <Table.Column title="类型" dataIndex="type" width={100} align="center" cell={typeCell} />
                <Table.Column title="排序号" dataIndex="orderNum" width={80} />
                <Table.Column title="URL" dataIndex="url" width={180} cell={wrapperCell} />
                <Table.Column title="授权标识" dataIndex="perms" width={180} cell={wrapperCell} />
                <Table.Column title="ID" dataIndex="menuId" width={80} />
                <Table.Column title="操作" dataIndex="menuId" width={150} align="center" cell={actionCell} />
              </Table>
            </Card.Content>
          </Card>
        </ResponsiveGrid.Cell>
      </ResponsiveGrid>
      <MainForm
        visible={showForm}
        handleVisible={setShowForm}
        menuId={menuId}
        refresh={refresh}
        mainField={mainField}
      />
    </>
  );
};

export default Menu;
